<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

    <body>

        <ui:composition template="./../Templates/general2.xhtml">
            <ui:param name="title" value="Registros" />

            <ui:define name="extraHead">
                <script type="text/javascript" src="/satk/resources/js/script-registros-personas.js" />
            </ui:define>

            <ui:define name="content">

                <ui:decorate template="/Templates/formGeneral.xhtml">
                    <ui:param name="id" value="form-registro"/>
                    <ui:param name="title" value="Nuevo registro de persona" />

                    <ui:define name="before">
                        <script type="text/javascript">
                            jQuery(function(){
                                SATK.Forms.markRequired("#form-edit");
                                $("#form-registro\\:nacimiento").datepicker({
                                    showOn: 'button', buttonImageOnly: true,
                                    buttonImage: SATK.Bases.iconCalendar(), showAnim: 'clip',
                                    changeMonth: true, changeYear: true, minDate: "-80Y"
                                });
                            });
                        </script>
                    </ui:define> <!-- form:before -->

                    <ui:define name="boxMsg">
                        <div id="msg-registro"/>
                    </ui:define> <!-- form:boxMsg -->

                    <ui:define name="content">
                        <p>
                            <label for="pnombre" required="1" >Primer Nombre:<span/></label>
                            <h:inputText id="pnombre" value="#{addPersonaBeans.news.primerNombre}"  />
                        </p>
                        <p>
                            <label for="snombre">Segundo Nombre:</label>
                            <h:inputText id="snombre" value="#{addPersonaBeans.news.segundoNombre}" />
                        </p>
                        <p>
                            <label for="paterno" required="1">Apellido Paterno:<span/></label>
                            <h:inputText id="paterno" value="#{addPersonaBeans.news.paterno}"  />
                        </p>
                        <p>
                            <label for="materno" required="1">Apellido Materno:<span/></label>
                            <h:inputText id="materno" value="#{addPersonaBeans.news.materno}" />
                        </p>
                        <p>
                            <label for="sexo" required="1">Sexo:<span/></label>
                            <h:selectOneMenu id="sexo" value="#{addPersonaBeans.news.sexo}">
                                <f:selectItem itemLabel="Mujer" itemValue="F"/>
                                <f:selectItem itemLabel="Hombre" itemValue="V"/>
                            </h:selectOneMenu>
                        </p>
                        <p>
                            <label for="nacimiento" >F. de Nacimiento (dd/mm/yyy):<span/></label>
                            <h:inputText id="nacimiento" value="#{addPersonaBeans.news.nacimiento}" autocomplete="off"
                                         converterMessage="Ingrese una fecha con el formato dd/mm/yyyy">
                                <f:convertDateTime dateStyle="short" pattern="dd/MM/yyyy"/>
                            </h:inputText>
                        </p>
                        <h:message for="nacimiento" styleClass="validator-messages" />
                        <p>
                            <h:outputLabel for="boleta">Boleta:<span/></h:outputLabel>
                            <h:inputText id="boleta" 
                                         value="#{addPersonaBeans.news.boleta}" autocomplete="off" 
                                         converterMessage="Ingrese una boleta valida (###)">
                                <f:convertNumber  type="number" maxIntegerDigits="10" />
                            </h:inputText>
                        </p>
                        <p>
                            <h:outputLabel for="institucion">Institucion:<span/></h:outputLabel>
                            <h:selectOneMenu id="institucion" 
                                             value="#{addPersonaBeans.news.institucion.identificador}">
                                <f:selectItems value="#{allInsitucionesBean.selectItems}"/>
                            </h:selectOneMenu>
                        </p>
                    </ui:define> <!-- form:content -->

                    <ui:define name="command">
                        <h:commandButton id="guardar" value="Registrar">
                            <f:ajax event="click" execute="@form" render="@form"
                                    listener="#{addPersonaBeans.add()}"
                                    onerror="function(ex){eventRegistro(this, ex);}"  
                                    onevent="function(evnt){eventRegistro(this, evnt);}" />
                            <f:ajax event="click" 
                                    listener="#{allPersonasBeans.recargaLista()}" 
                                    onerror="function(ex){}" onevent="function(){}" />
                        </h:commandButton>
                        <h:commandButton id="limpiar" value="Limpiar" type="reset" />
                    </ui:define> <!-- form:command -->

                </ui:decorate> <!-- formGemenarl:[form-registro] -->

                <ui:decorate template="/Templates/formGeneral.xhtml">
                    <ui:param name="id" value="form-edit"/>
                    <ui:param name="title" value="Edición de persona" />

                    <ui:define name="before">
                        <script type="text/javascript">
                            jQuery(function(){
                                SATK.Forms.markRequired("#form-edit");
                                $("#form-edicion\\:nacimiento").datepicker({
                                    showOn: 'button', buttonImageOnly: true,
                                    buttonImage: SATK.Bases.iconCalendar(), showAnim: 'clip',
                                    changeMonth: true, changeYear: true, minDate: "-80Y"
                                });
                            });
                        </script>
                    </ui:define> <!-- form:before -->

                    <ui:define name="boxMsg">
                        <div id="msg-edita"/>
                    </ui:define> <!-- form:boxMsg -->

                    <ui:define name="content">
                        <p>
                            <label for="pnombre" required="1" >Primer Nombre:<span/></label>
                            <h:inputText id="pnombre" value="#{editPersonaBeans.edit.primerNombre}"  />
                        </p>
                        <p>
                            <label for="snombre">Segundo Nombre:</label>
                            <h:inputText id="snombre" value="#{editPersonaBeans.edit.segundoNombre}" />
                        </p>
                        <p>
                            <label for="paterno" required="1">Apellido Paterno:<span/></label>
                            <h:inputText id="paterno" value="#{editPersonaBeans.edit.paterno}"  />
                        </p>
                        <p>
                            <label for="materno" required="1">Apellido Materno:<span/></label>
                            <h:inputText id="materno" value="#{editPersonaBeans.edit.materno}" />
                        </p>
                        <p>
                            <label for="sexo" required="1">Sexo:<span/></label>
                            <h:selectOneMenu id="sexo" value="#{editPersonaBeans.edit.sexo}">
                                <f:selectItem itemLabel="Mujer" itemValue="F"/>
                                <f:selectItem itemLabel="Hombre" itemValue="V"/>
                            </h:selectOneMenu>
                        </p>
                        <p>
                            <label for="nacimiento" >F. de Nacimiento (dd/mm/yyy):<span/></label>
                            <h:inputText id="nacimiento" value="#{editPersonaBeans.edit.nacimiento}" autocomplete="off"
                                         converterMessage="Ingrese una fecha con el formato dd/mm/yyyy">
                                <f:convertDateTime dateStyle="short" pattern="dd/MM/yyyy"/>
                            </h:inputText>
                        </p>
                        <h:message for="nacimiento" styleClass="validator-messages" />
                        <p>
                            <h:outputLabel for="boleta">Boleta:<span/></h:outputLabel>
                            <h:inputText id="boleta" 
                                         value="#{editPersonaBeans.edit.boleta}" autocomplete="off" 
                                         converterMessage="Ingrese una boleta valida (###)">
                                <f:convertNumber  type="number" maxIntegerDigits="10" />
                            </h:inputText>
                        </p>
                        <p>
                            <h:outputLabel for="institucion">Institucion:<span/></h:outputLabel>
                            <h:selectOneMenu id="institucion" 
                                             value="#{editPersonaBeans.edit.institucion.identificador}">
                                <f:selectItems value="#{allInsitucionesBean.selectItems}"/>
                            </h:selectOneMenu>
                        </p>
                    </ui:define> <!-- form:content -->

                    <ui:define name="command">
                        <h:commandButton id="guardar" value="Guardar">
                            <f:ajax event="click" execute="@form" render="@form"
                                    listener="#{editPersonaBeans.edit()}"
                                    onerror="function(ex){eventoEdicion(this, ex);}"  
                                    onevent="function(evnt){eventoEdicion(this, evnt);}" />
                            <f:ajax event="click" 
                                    listener="#{allPersonasBeans.recargaLista()}" 
                                    onerror="function(ex){}" onevent="function(){}" />
                        </h:commandButton>
                        <h:commandButton id="cancelar" value="Cancelar" onclick="eventCancelEdit();" />
                    </ui:define> <!-- form:command -->

                </ui:decorate> <!-- formGemenarl:[form-edicion] -->

                <ui:decorate template="/Templates/elms/entradaSimple.xhtml">
                    <ui:param name="id" value="control-registros"/>

                    <ui:define name="content">
                        <h:form id="form-control-registros">
                            <h:commandLink id="btn-updateList" value="Actualizar lista">
                                <f:ajax event="click" listener="#{allPersonasBeans.recargaLista()}" 
                                        onerror="function(ex){recargaLista(this, ex);}" 
                                        onevent="function(evnt){recargaLista(this, evnt);}"/>
                            </h:commandLink>
                            <a href="#" id="btn-openRegistro">Registrar Persona</a>
                        </h:form>
                    </ui:define> <!-- entradaSimple:content -->

                </ui:decorate> <!-- entradaSimple:[control-registros] -->

                <ui:decorate template="/Templates/elms/entrada.xhtml">
                    <ui:param name="id" value="lista-personas"/>
                    <ui:define name="title">Personas Registradas</ui:define>

                    <ui:define name="content">
                        <h:form id="action-personas">
                            <h:dataTable id="tabPersonas" styleClass="ui-table"
                                         value="#{allPersonasBeans.dataModel}" var="per" 
                                         rowClasses=", row-inpar">
                                <c:set value="#{allPersonasBeans.dataModel.rowIndex+1}" var="indexRow" />

                                <!-- Columna de numeración -->
                                <h:column>
                                    <f:facet name="header"><h:outputText value="No."/></f:facet>
                                    <h:outputText value="#{indexRow}" />
                                </h:column>

                                <!-- Columa de nombre completo de la Persona -->
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Nombre" style="width: 300px; display: block;" />
                                    </f:facet>
                                    <h:outputText value="#{per.fullName}"/>
                                </h:column>

                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Sexo" style="width: 30px; display: block;" />
                                    </f:facet>
                                    <h:outputText value="#{per.sexo}" style="text-align: center; display: block;" />
                                </h:column>

                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Nacimiento" title="Fecha de Nacimiento" style="width: 100px; display: block;" />
                                    </f:facet>
                                    <h:outputText value="#{per.nacimiento}" style="text-align: center; display: block;">
                                        <f:convertDateTime type="date" pattern="dd/MM/yyyy"/>
                                    </h:outputText>    
                                </h:column>

                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Boleta" style="width: 60px; display: block;" />
                                    </f:facet>
                                    <h:outputText value="#{per.boleta}"/>
                                </h:column>

                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Institucion" style="width: 90px; display: block;" />
                                    </f:facet>
                                    <h:outputText value="#{per.insSiglas}" style="text-align: center; display: block;" />
                                </h:column>

                                <h:column>
                                    <f:facet name="header">Acción</f:facet>
                                    <h:commandLink title="Editar">Editar
                                        <f:ajax event="click" listener="#{editPersonaBeans.startEdit(per)}"
                                                onevent="function(evnt){openEdit(evnt);}"
                                                onerror="function(ex){}"/>
                                    </h:commandLink>
                                </h:column>
                            </h:dataTable>

                            <h:panelGroup layout="block" style="text-align: center; margin-top: 5px;" >
                                <h:commandButton  value="Mostar mas registros" rendered="#{allPersonasBeans.morePages}"  >
                                    <f:ajax event="click" render="@form" 
                                            immediate="true" listener="${allPersonasBeans.loadMore()}"/>
                                </h:commandButton>

                            </h:panelGroup>
                        </h:form>


                    </ui:define> <!-- entrada:content -->

                </ui:decorate> <!-- entrada:[lista-personas] -->
            </ui:define>

        </ui:composition>

    </body>
</html>
